<!--
 @description Tag标签列
 @fileName index.vue
 @author zengqiongying
 @created 2023/04/19 16:33:19
-->
<template>
  <div
    :class="[
      'tag',
      colorClass,
      {
        mini: size === 'mini'
      }
    ]"
  >
    <slot></slot>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'Tag'
  }
</script>
<script lang="ts" setup>
  import { computed, defineProps } from 'vue'
  const props = defineProps({
    tagClass: {
      type: String,
      default: ''
    }, // 标签class
    size: {
      type: String,
      default: 'large' //标签大小: mini(小) large(大)
    },
    type: {
      type: String,
      default: 'default' //类型：default 灰色，primary 绿色
    },
    plain: {
      type: Boolean,
      default: false
    } // 是否为空心样式
  })
  const colorClass = computed(() => {
    if (props.type === 'primary') {
      return props.plain ? 'primary-plain' : 'primary'
    } else {
      return props.plain ? 'default-plain' : 'default'
    }
  })
</script>
<style lang="less" scoped>
  .tag {
    position: relative;
    display: inline-flex;
    padding: 8px 16px;
    margin-right: 8px;
    margin-bottom: 4px;
    font: var(--font-main-body);
    border-radius: var(--radius-max);
    &.mini {
      padding: 2px 8px;
      margin-right: 4px;
      // border-radius: 2px;
    }
    &.default {
      background: var(--bg-global-weak);
      color: var(--texticon-default-tronger);
    }
    &.default-plain {
      background: var(--bg-global-weaker);
      color: var(--texticon-default-tronger);
      border: 1px solid var(--button-grey-default);
    }
    &.primary {
      background: var(--button-main-default);
      color: var(--texticon-contrary-strong);
    }
    &.primary-plain {
      background: var(--bg-focusing-brand);
      color: var(--button-main-default);
      border: 1px solid var(--button-main-default);
    }
  }
</style>
